<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			{{msg}}
			<br>


			<!-- 使用定义的全局组件 -->
			<my-hello></my-hello>
			<hr>
			<!-- 使用局部组件 -->
			<ju-bu></ju-bu>

		</div>
		<script type="text/javascript">
			// 全局注册组件  必须在new Vue之前
			// Hello为组件的名字  推荐使用 kebab-case(短横线命名规则) 也可以驼峰命名规则(在单页组件中适用)
			Vue.component("my-hello", {
				data: function() {
					return {
						name: "全局"
					}
				},
				template: "<span>名字：{{name}}</span>"
			})


			// 局部组件定义属性
			var zu = {
				// 省略了 :function
				data() {
					return {
						jj: "局部"
					}
				},
				template: `
				
				<span>名字：{{jj}}</span>
				
				`
			}

			var app = new Vue({
				el: "#container",
				data: {
					msg: "组件使用",
				},
				// 局部注册组件  key(定义的组件名字)：value(组件对象 )
				components: {
					"ju-bu": zu
				}
			})
		</script>
	</body>
</html>
